<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type='text/css'>
			*{ margin:0; padding:0;}
			#banner{
				width:520px;
				height:280px;
				margin:20px auto;
				border:1px solid red;
				position:relative;
			}
			#banner .pic{
				width:100%;
				height:100%;
				overflow:hidden;
			}
			li{
				list-style:none;
			}
			#banner .pic ul{
				width:1000%;
				overflow:hidden;
				margin-left:-520px;
			}
			#banner .pic ul li{
				float:left;
			}

			#banner .tab{
				width:70px;
				height:14px;
				background:#fff;
				background:rgba(255,255,255,0.5);
				position:absolute;
				left:50%;
				margin-left:-35px;
				bottom:10px;
				border-radius:7px;
			}
			#banner .tab ul li{
				width:10px;
				height:10px;
				border-radius:100%;
				background:#999;
				float:left;
				margin:2px 2px;
				cursor:pointer;
			}
			#banner .tab ul li.on{
				background:#f60;
			}
			#banner .btn{
				display:none;
			}
			#banner .btn div{
				width:40px;
				height:40px;
				background:#000;
				background:rgba(0,0,0,0.3);
				color:#fff;
				font-size:26px;
				font-weight:bold;
				text-align:center;
				line-height:40px;
				cursor:pointer;
				position:absolute;
				top:50%;
				margin-top:-20px;
			}
			#leftBtn{
				left:5px;
			}
			#rightBtn{
				right:5px;
			}
			#banner .btn div.hover{
				background:rgba(0,0,0,0.6)
			}

		</style>
	</head>
	<body>
		<div id="banner">

			
			<div class="pic">


				<ul>


					<li><a href=""><img src="img/5.jpg" /></a></li>
					<li><a href=""><img src="img/1.jpg" /></a></li>
					<li><a href=""><img src="img/2.jpg" /></a></li>
					<li><a href=""><img src="img/3.jpg" /></a></li>
					<li><a href=""><img src="img/4.jpg" /></a></li>
					<li><a href=""><img src="img/5.jpg" /></a></li>
					<li><a href=""><img src="img/1.jpg" /></a></li>
				</ul>
			</div>

			<div class="tab">


				<ul>


					<li class="on"></li><li></li><li></li><li></li><li></li>
				</ul>
			</div>

			<div class="btn">


				<div id="leftBtn">&lt;</div>
				<div id="rightBtn">&gt;</div>
			</div>

		</div>
      <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
       <script type="text/javascript">
       	  $(function(){
       	  	  
       	  	   var $tabLi=$("#banner .tab li")
       	  	   var $picUl = $('#banner .pic ul');
       	  	   var imgWidth = $('#banner .pic li').width();
       	  	   var banner=$("#banner")
       	  	   var bts=$("#banner .btn")
       	  	   var btsDiv=$("#banner .btn div")
       	  	   var index=0;
       	  	   var nowTime =new Date()
       	  	    
       	  	    $tabLi.on("click",function(){

       	  	   	    index=$(this).index();
       	  	   	    $(this).addClass("on").siblings().removeClass("on")
       	  	   	    
       	  	   	    $picUl.animate({

       	  	   	     marginLeft : -imgWidth*(index+1) + 'px'

       	  	   	    },3000)
       	  	   })
       	  	    
       	  	  
       	  	   banner.hover(function(){
       	  	   	   bts.show()
       	  	   	 clearInterval(time);

       	  	   },function(){

       	  	   	 bts.hide();
       	  	   	  var time=setInterval(function(){
       	  	   	  	   index++;
       	  	   	  	   fn();
       	  	   	  },5000)
       	  	   	   
       	  	   })
       	  	  
       	  	   btsDiv.hover(function(){

       	  	   	  $(this).addClass("hover")
       	  	   	
       	  	   },function(){

       	  	   	 $(this).removeClass("hover")
       	  	   }).click(function(){

       	  	   	   if(new Date()-nowTime>350){

       	  	   	   	    nowTime=new Date();
       	  	   	   	    var i=$(this).index();
       	  	   	   	      i?index++:index--;
       	  	   	   	      fn()

       	  	   	   }
       	  	   })
       	  	 
       	  	     //函数封装
       	  	   
       	  	   function fn(){
       	  	   	var liIndex = index;
                    if(liIndex>=$tabLi.length){
                    	liIndex=0;
                    }else if(liIndex<0){
                    	liIndex=$tabLi.length-1;
                    }
                    $tabLi.eq(liIndex).addClass("on").siblings().removeClass("on")
       	  	   	    $picUl.animate({

       	  	   	     marginLeft : -imgWidth*(index+1) + 'px'

       	  	   	    },300,function(){
       	  	   	    	 if(index==$tabLi.length){
       	  	   	    	 	$picUl.css('marginLeft' , -imgWidth+'px');
       	  	   	    	 	 index=0;
       	  	   	    	 }else if(index<0){
       	  	   	    	 	$picUl.css('marginLeft' , -imgWidth*($tabLi.length)+'px');

       	  	   	    	 	 index=$tabLi.length-1;
       	  	   	    	 }
       	  	   	    	
       	  	   	    })
       	  	   }
       	  	   //自动播放
       	  	 var time=setInterval(function(){
       	  	    	  index++;
       	  	    	  fn()
       	  	    },5000)
       	  	   
       	  })
       	  
       	   
    
       </script>
	</body>
</html>
